<template>
	<view class="supply-info-box">
		<uni-nav-bar background-color="#fff" color="#000" :status-bar="true" title="供应详情" fixed>
			<view slot="left">
				<view class="navWp">
					<view class="back" @click="goBack">
						<u-icon name="arrow-left" color="#000000" size="50"></u-icon>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="swiper-top" v-if="infoObj.imageList.length">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in infoObj.imageList" :key="index">
					<view class="swiper-item uni-bg-red">
						<u-image :src="item" width="100%" height="750rpx" :lazy-load="true" mode="aspectFill"></u-image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="top">
			<view class="title">
				{{infoObj.name}}
			</view>
			<view class="num">
				￥{{infoObj.price}}
			</view>
		</view>
		<view class="middle">
			<view class="item">
				<text class="label">产品库存：</text>
				{{infoObj.stock}}
			</view>
			<view class="item">
				<text class="label">产品规格：</text>
				{{infoObj.specs}}
			</view>
			<view class="item">
				<text class="label">产品介绍：</text>
				{{infoObj.perfile||'暂无'}}
			</view>


		</view>

		<view class="info-img-box">
			<view class="info-img-title">
				产品详情
			</view>

			<view class="info-img-swiper" v-for="(item,index) in infoObj.imageList" :key="index">
				<u-image :src="item" width="100%" height="100%" :lazy-load="true" mode="widthFix"></u-image>
			</view>
		</view>
		<view class="phone-box">
			<u-button type="primary" shape="circle" color="#2684ff" text="立即联系" @click="handleCall()">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoId: '',
				infoObj: {
					imageList: [],
					name: '',
					price: '',
					stock: '',
					specs: '',
					perfile: ''
				},
			};
		},
		onLoad(option) {
			if (option.id) {
				this.infoId = option.id
				this.queryListById()
			}
		},
		onUnload() {
			//修改上级页面的 tabVal 值为 1
			uni.$emit('resetTabVal', 1)
		},
		methods: {
			goBack() {
				uni.setStorageSync(`supplyJumpTo`, 2)
				const pageNum = getCurrentPages()
				if (pageNum.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/card/card'
					})
				}

			},
			// 根据id获取详情列表
			queryListById() {
				this.$api.queryMySupplyListsById(this.infoId).then(res => {
					console.log(res)
					if (res.success) {
						res.result.imageList = res.result.imageList ? res.result.imageList.split(",") : []
						this.infoObj = res.result
						// this.avatarList = res.result.qzActivitySignVOList
					}
				})
			},
			//打电话
			handleCall() {
				let phoneNumber = String(this.infoObj.boSupplierInfo.userTel)
				try {
					uni.makePhoneCall({
						phoneNumber
					});
				} catch (e) {
					uni.showToast({
						title: "电话号码有误"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.supply-info-box {
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.swiper-top {
			.swiper {
				height: 100vw;

				.swiper-item {
					text-align: center;
				}

			}
		}

		.top,
		.middle {
			font-size: 28rpx;
			font-weight: 400;
			color: #1D2129;
			line-height: 39rpx;
			padding: 24rpx 32rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.title,
			.num {
				line-height: 45rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.num {
				color: #FF7D00;
				margin-top: 20rpx;
			}

			.item {
				margin-bottom: 24rpx;

				&:last-of-type {
					margin-bottom: 0;
				}

				.label {
					color: #4E5969;
					min-width: 146rpx;
					display: inline-block;
				}
			}
		}

		.info-img-box {
			margin-top: 20upx;

			.info-img-title {
				text-align: center;
				font-size: 28upx;
				color: #666666;
			}

			.info-img-swiper {
				margin-top: 32upx;
			}
		}

		.phone-box {
			position: fixed;
			width: 100%;
			padding: 16rpx 48rpx calc(10rpx + env(safe-area-inset-bottom));
			bottom: 0;
			box-sizing: border-box;
			background-color: #fff;
		}

	}
</style>